<template>
    <!--资料-->
    <div class="ziliao">
        <div class="list" v-for="item in dataList">
            <img v-if="item.qualified == 1" src="../../../assets/tongguo.png" alt="" class="icon">
            <img v-if="item.qualified != '' && item.qualified == 0" src="../../../assets/notongguo.png" alt="" class="icon">
            <div class="title">{{item.examName}}
                <Button class="pull-right" @click="openService(item.remark)">考试指南</Button>
            </div>
            <ul>
                <li>
                    <span v-if="item.examStatus == 0">缴      费：待缴费</span>
                    <span v-if="item.examStatus == 1">缴      费：已缴费</span>
                    <span v-if="item.examStatus == 2">缴      费：已结束</span>
                    <span v-if="item.examStatus == 3">缴      费：已取消</span>
                    <a href="javascript:;" @click="payExam(item.id)" v-if="item.examStatus == 0">去缴费</a>
                </li>
                <li v-for="data in item.seasonList">
                    <span>{{data.childexamName}}：</span>{{data.examTime}} {{data.examStartTime}} - {{data.examEndTime}}
                </li>
                <li><span>考试方式：</span>{{item.exanMode == 1 ? '网络考试' : '线下考试'}}</li>
                <li><span>考试地点：</span>{{item.exanMode == 1 ? '网络考试' : item.examinationHtml}}</li>
            </ul>
            <div class="link" v-if="item.exanMode == 1">
                考试链接：<Input :value="item.examinationHtml" size="large" placeholder="" readonly/>
                <Button @click="openExam(item.examinationHtml)">打开链接</Button>
            </div>
            <p class="tip" v-if="item.exanMode == 1">请复制考试链接，使用PC电脑上的谷歌(chrome)浏览器打开进入考试。</p>
        </div>
        <div class="pageout">
            <Page :total="total" :current="pageNumber" :pageSize="size" @on-change="changePage"/>
        </div>
        <Modal v-model="showModel" width="580" class-name="vertical-center-modal">
            <p slot="header" class="header">考试指南</p>
            <div class="notice" v-html="examinationDetail">
                {{examinationDetail}}
            </div>
        </Modal>
    </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">

    .pageout {
        text-align: center;
        margin-top: 25px;
        height: 34px;
    }

    .list {
        box-shadow: 0px 0px 10px #ececec;
        padding: 30px;
        border-radius: 5px;
        margin-bottom: 30px;
        position: relative;

        .icon {
            position: absolute;
            top: 65px;
            left: 50%;
            margin-left: -60px;
        }

        .title {
            font-size: 18px;
            color: #333;
            margin-bottom: 20px;

            button {
                color: #B2936B;
                border: 1px solid #B2936B;
            }
        }

        ul {
            border-bottom: 1px dashed #dbdbdb;
            padding-bottom: 20px;

            li {
                font-size: 14px;
                color: #666;
                line-height: 27px;

                a {
                    background-color: #2492FF;
                    color: #fff;
                    font-size: 14px;
                    border-radius: 5px;
                    padding: 3px 6px;
                    margin-left: 5px;
                }

                span {
                    color: #333;
                }
            }
        }

        .link {
            font-size: 14px;
            color: #000;
            margin: 25px 0 15px;

            .ivu-input-wrapper {
                display: inline-block;
                width: 75%;
            }

            button {
                height: 36px;
                margin-left: 20px;
                color: #fff;
                background-color: #C7AF79;
            }
        }

        .tip {
            font-size: 14px;
            color: #8D663E;
        }
    }

</style>
<script type="text/ecmascript-6">
    import {getmyExamination, getOrderByTarget} from "../../../http"

    export default {
        name: '',
        props: {},
        data() {
            return {
                showModel: false,
                examinationDetail: '',
                dataList: [],
                total: 0,//总共数据数量
                pageNumber: 1,//当前页码
                size: 10//每页几条
            }
        },
        methods: {
            changePage(pageNumber) {
                this.pageNumber = pageNumber
                this.getmyExamination()
            },
            getmyExamination() {
                let that = this
                getmyExamination({page: this.pageNumber,limit: this.size}).then(res => {
                    that.total = res.data.total
                    that.dataList = res.data.rows
                })
            },
            payExam(v) {
                getOrderByTarget({targetId: v}).then(res => {
                    this.$router.push({
                        name: 'orderdetail',
                        query: {
                            orderId: res.data.order.id
                        }
                    })
                })
            },
            openService(v){
                this.showModel = true
                this.examinationDetail = v
            },
            openExam(v) {
                window.open('http://kaoshi.cbstudy.com/' + v)
            }
        },
        created() {
            this.getmyExamination()
        },
        mounted() {

        },
    }
</script>
